extends ../../components/layout
append style
  +css('demo/demo.css')
block title
  title select
block content
  header.demos-header
    h1.demos-title select
  .gzl-cell
    .gzl-label 多选单选
    .gzl-cell__bd
      .gzl-select.placeholder.test 请输入
  .gzl-cell
    .gzl-label 单选
    .gzl-cell__bd
      .gzl-select.placeholder.test2 请输入
  .gzl-cell
    .gzl-label 带值
    .gzl-cell__bd
      .gzl-select.test3(data-val="儿童/女") 儿童/女
  .gzl-cell
    .gzl-label 联动
    .gzl-cell__bd
      .gzl-select.placeholder.test4 请选择
  .gzl-cell
    .gzl-label 联动
    .gzl-cell__bd
      .gzl-select.placeholder.test5 请选择
  .gzl-cell
    .gzl-label 联动
    .gzl-cell__bd
      .gzl-select.placeholder.test6 请选择
  .gzl-cell
    .gzl-label 单选
    .gzl-cell__bd
      .gzl-select.placeholder.test7 请输入
append script
  script.
    require(['select','linkage'], function () {
      $(".test").select({
        title: "选择游客类型1",
        item: [{
          nav: '游客类型',
          option: ['成人', '儿童', '长者']
        },{
          nav: '性别',
          option: ['男', '女']
        }]
      });
      $(".test2").select({
        title: "测试2",
        item: [{
          nav: '性别',
          option: ['男', '女']
        }]
      });
      $(".test3").select({
        title: "测试3",
        item: [{
          nav: '游客类型',
          option: ['成人', '儿童', '长者']
        }, {
          nav: '性别',
          option: ['男', '女']
        }]
      });
      $(".test4").on("click", function () {
        $.linkage({
          title: "测试4",
          target: ".test4",
          linkage: $.rawCitiesData
        });
      })
      $(".test5").linkage({
        title: "测试5",
        linkage: $.rawCitiesData
      })
      $(".test6").linkage({
        title: "测试6",
        linkage: [{
          name: '门店自取',
          sub: [{
            name: '天河区'
          },{
            name: '白云区',
            sub: [{
              name: '乐嘉路店',
              con: '<h2>乐嘉路店</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi assumenda consequatur deleniti dolor doloremque eius eveniet in laboriosam molestiae nam officia omnis, perspiciatis saepe sapiente soluta veritatis voluptas voluptatum.'
            },{
              name: '广之旅太阳新天地定制旅游俱乐部会员店',
              con: '<h2>广之旅太阳新天地定制旅游俱乐部会员店</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda error impedit ipsa molestiae mollitia praesentium sed tenetur ut veritatis? Commodi dolore eos et fugiat molestias nostrum porro quas quod reprehenderit!'
            }]
          },{
            name: '越秀区'
          },{
            name: '海珠区'
          },{
            name: '荔湾区'
          }]
        },{
          name: '快递到付'
        }]
      })
      $(".test7").select({
        title: "测试7",
        item: [{
          nav: '性别',
          option: [{
            name: '男',
            type: 'man'
          }, {
            name: '女',
            type: 'woman'
          }]
        }]
      });
    })